<template>
  <div>
    <div>
      <div>
        <van-pull-refresh
          v-model="isLoading"
          class="wxchat-container"
          @refresh="onRefresh"
        >
          <div ref="main" class="message">
            <div ref="content" class="window">
              <ul>
                <li
                  v-for="msg in messages"
                  :key="msg.id"
                  :class="msg.is_owner ? 'an-move-right' : 'an-move-left'"
                >
                  <p class="time">
                    <span v-text="format_date(msg, messages)" />
                  </p>

                  <div :class="msg.is_owner ? 'self' : 'other'">
                    <img
                      class="avatar"
                      width="45"
                      height="45"
                      :src="msg.author_image"
                    >

                    <!-- 文本 -->
                    <div v-if="msg.model === 'mail.channel'" class="text">
                      <ChatText :message="msg" />
                    </div>

                    <div v-else>
                      <ChatOrder :message="msg" />
                    </div>

                    <!-- 图片 -->
                    <!-- <div class="text">
                    <img :src="" class="image" alt="聊天图片" />
                    </div> -->
                  </div>
                  ...{{ msg.id }}
                </li>
              </ul>

              <!-- {{ data }} -->
            </div>
          </div>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

import ChatText from './chatText'
import ChatOrder from './chatOrder'

export default {
  name: 'ChatMsg',
  components: { ChatText, ChatOrder },

  props: {
    //
  },

  data() {
    return {
      //
      isLoading: false
    }
  },
  computed: {
    //
    messages: function() {
      const msgs = this.$store.state.appChat.messages
      return msgs.map(item => {
        return {
          ...item
        }
      })
    },

    isScroll: function() {
      return this.$store.state.appChat.isScroll
    },
    user_partner_id: function() {
      return this.$store.state.user.partner_id
    }
  },

  watch: {
    //
    messages: function() {
      if (this.isScroll) {
        this.scroll()
      }
    }
  },

  async created() {
    //
  },

  mounted() {
    //
  },

  methods: {
    //
    async onRefresh() {
      await this.$store.dispatch('appChat/fetchHistory')
      this.isLoading = false
    },

    // 屏幕滚动
    scroll() {
      this.$nextTick(() => {
        this.$refs.main.scrollTop = this.$refs.content.scrollHeight
      })
    },

    format_date(message, msgList) {
      const getNewDate = str => {
        return new Date(str.replace(/-/g, '/'))
      }

      const get_date_show = (date, date_last) => {
        //
        if (!date_last) {
          return date
        }

        // if (! getNewDate(date).getMinutes() % 10) {
        //   return date
        // }

        // console.log('xxxxx,message, ', message, date, date_last)

        if (getNewDate(date) - getNewDate(date_last) > 1000 * 60) {
          return date
        }

        return null
      }

      const index = msgList.findIndex(item => item.id === message.id)
      const date_last = index ? msgList[index - 1].date : null

      const date_show = get_date_show(message.date, date_last)

      if (!date_show) {
        return null
      }

      const dt2 = new Date(getNewDate(date_show).getTime() + 1000 * 60 * 60 * 8)

      const today = parseTime(new Date(), '{y}-{m}-{d}')
      const dt2_yyyymmdd = parseTime(dt2, '{y}-{m}-{d}')

      if (dt2_yyyymmdd === today) {
        return `今天 ${parseTime(dt2, '{h}:{i}')}`
      } else if (getNewDate(today) - getNewDate(dt2_yyyymmdd) === 86400000) {
        return `昨天 ${parseTime(dt2, '{h}:{i}')}`
      } else {
        return parseTime(dt2, '{y}-{m}-{d} {h}:{i}')
      }
    }
  }
}
</script>

<style type="text/css">
.message {
  width: 100%;
  height: 400px;
  padding: 10px;
  box-sizing: border-box;
  /* background-color: pink; */
  background-color: #f5f5f5;
  overflow: auto;
}
.message li {
  margin-bottom: 15px;
  left: 0;
  position: relative;
  display: block;
}

.message .time {
  margin: 10px 0;
  text-align: center;
}

.message .time > span {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  background-color: #dadada;
}
.message .self {
  text-align: right;
}
.message .self .avatar {
  float: right;
  margin: 0 0 0 10px;
}
.message .self .text {
  background-color: #9eea6a;
}

.message .self .text:before {
  right: inherit;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #9eea6a;
}

.message .other {
  text-align: left;
}
.message .other .avatar {
  float: left;
  margin: 0 0 0 10px;
}

.message .other .text {
  background-color: #9eea6a;
}

.message .other .text:before {
  left: inherit;
  right: 100%;
  border-left-color: transparent;
  border-right-color: #9eea6a;
}

.an-move-left {
  left: 0;
  animation: moveLeft 0.7s ease;
  -webkit-animation: moveLeft 0.7s ease;
}
.an-move-right {
  left: 0;
  animation: moveRight 0.7s ease;
  -webkit-animation: moveRight 0.7s ease;
}
</style>
